<template>
  <view class="container">
    <!-- 加载状态 -->
    <view v-if="loading" class="skeleton-container">
      <view class="skeleton-banner"></view>
      <view class="skeleton-grid">
        <view class="skeleton-item" v-for="i in 4" :key="i"></view>
      </view>
      <view class="skeleton-section"></view>
      <view class="skeleton-section"></view>
    </view>

    <!-- 错误状态 -->
    <view v-else-if="error" class="error-container">
      <text class="error-text">数据加载失败，请稍后重试</text>
    </view>

    <!-- 正常内容 -->
    <view v-else class="content-container">
      <!-- 顶部banner -->
      <!--    <view class="banner">-->
      <!--        <image class="banner-image" src="/static/images/home/home-top.jpg" mode="aspectFill"-->
      <!--        style="width: 100%; height: 110px" />-->
      <!--    </view>-->
      <uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
        <swiper class="swiper-box" @change="change" :autoplay="true" :interval="3000">
          <swiper-item v-for="(item, index) in info" :key="index">
            <view class="swiper-item">
              <image class="swiper-image" :src="item.image" mode="aspectFill" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>


      <!-- 功能入口 -->
      <view class="grid">
        <view class="grid-item" v-for="(item, index) in gridItems" :key="index" @click="handleGridClick(item.text)">
          <image class="grid-icon" :src="item.icon" />
          <text class="grid-text">{{ item.text }}</text>
        </view>
      </view>

      <!-- 用户评价 -->
      <view class="comments-section">
        <user-comments :comments="comments" />
      </view>

      <!-- 公告栏 -->
      <view class="notice">
        <view class="notice-header">
          <text class="notice-title">最新公告</text>
          <text class="notice-more">更多 ></text>
        </view>
        <view class="notice-content">
          <text class="notice-item">· 回收价格上调通知</text>
          <text class="notice-item">· 春节假期安排公告</text>
          <text class="notice-item">· 新用户优惠活动</text>
        </view>
      </view>

      <!-- 服务优势 -->
      <view class="advantages">
        <view class="advantages-header">
          <text class="advantages-title">服务优势</text>
        </view>
        <view class="advantage-item">
          <image class="advantage-icon" src="/static/images/home/d3.jpg" />
          <view class="advantage-text">
            <text class="advantage-title">专业评估</text>
            <text class="advantage-desc">精准估价 透明公正</text>
          </view>
        </view>
        
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'


// 轮播图相关
const current = ref(0)
const mode = ref('default')
const change = (e) => {
  current.value = e.detail.current
}


// 设置页面标题
onLoad(() => {
  uni.setNavigationBarTitle({
    title: '首页'
  })
})
import UserComments from '../../components/user-comments/user-comments.vue'
import commentsData from '../../utils/electric-vehicle-constants.json'

// 数据状态
const loading = ref(true)
const error = ref(null)
const comments = ref([])
const gridItems = ref([])
// 定义 info 数据
const info = ref([])

// 轮播图处理
const fetchSwiperData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          content: '轮播图1',
          image: '/static/images/home/home-top.jpg'
        },
        {
          content: '轮播图2',
          image: '/static/images/home/home-top2.jpg'
        }
      ])
    }, 500)
  })
}


// 模拟异步数据获取
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        comments: commentsData.pinglun,
        gridItems: [
          {
            icon: '/static/images/home/d1.jpg',
            text: '电瓶车'
          },
          // {
          //   icon: '/static/images/home/d3.jpg',
          //   text: '报废回收'
          // },
          // {
          //   icon: '/static/images/home/d3.jpg',
          //   text: '价格查询'
          // },
          {
            icon: '/static/images/icon/coupon-ot.png',
            text: '优惠活动'
          }
        ]
      })
    }, 800)
  })
}

// 处理功能入口点击
const handleGridClick = (text) => {
  if (text === '电瓶车') {
    uni.navigateTo({
      url: '/pages/sell/sell'
    })
  }
  if (text === '优惠活动') {
    uni.navigateTo({
      url: '/pages/recycle/recycle'
    })
  }
}

// 初始化数据
onMounted(async () => {
  try {
    const swiperData = await fetchSwiperData()
    info.value = swiperData
    const data = await fetchData()
    comments.value = data.comments
    gridItems.value = data.gridItems
  } catch (err) {
    error.value = err
  } finally {
    loading.value = false
  }
})
</script>

<style lang="scss" scoped>
/* 页面容器 */
.container {
  padding: 16px;
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
}

/* 新增轮播图样式 */
.swiper-box {
  height: 200px; /* 必须设置高度 */
  .swiper-item {
    width: 100%;
    height: 100%;

    .swiper-image {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }
}

/* 顶部banner */
.banner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  &-image {
    width: 100%;
    height: 100%;
  }

  &-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  }

  &-title {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    display: block;
  }

  &-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-top: 4px;
    display: block;
  }
}

/* 功能入口 */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;

  &-header {
    margin-bottom: 16px;
  }

  &-title {
    color: #333;
    font-size: 16px;
    font-weight: bold;
  }

  &-item {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  &-icon {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    margin-left: 8px;
    object-fit: contain;
    flex-shrink: 0;
  }

  &-text {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
  }
}

/* 用户评价 */
.comments-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  .section-header {
    margin-bottom: 16px;
  }

  .section-title {
    color: #333;
    font-size: 16px;
    font-weight: bold;
  }
}

/* 公告栏 */
.notice {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  &-title {
    color: #333;
    font-size: 16px;
    font-weight: bold;
  }

  &-more {
    color: #666;
    font-size: 12px;
  }

  &-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &-item {
    color: #666;
    font-size: 14px;
  }
}

/* 服务优势 */
.advantages {
  background: #fff;
  border-radius: 12px;
  padding: 16px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  &-header {
    margin-bottom: 16px;
  }

  &-title {
    color: #333;
    font-size: 16px;
    font-weight: bold;
  }

  &-item {
    display: flex;
    align-items: center;
    padding: 12px 0;

    &:not(:last-child) {
      border-bottom: 1px solid #f0f0f0;
    }
  }

  &-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
  }

  &-title {
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }

  &-desc {
    color: #666;
    font-size: 12px;
  }
}

</style>
